$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$width: 82.292vw;
$f: 19.2;
*,
*::after,
*::before {
  box-sizing: border-box;
}
.home {
  position: relative;
  width: 100%;

  .banner {
    position: relative;
    padding-top: 3vw;
    .bg {
      overflow: hidden;

      img {
        width: 100%;
        transform: scale(1.1);
        transition: all 600ms;
        object-fit: cover;
      }
    }

    .text {
      width: $width;
      left: calc((100% - 82.292vw) / 2);
      position: absolute;
      top: 60%;
      transform: translateY(-50%);

      .t {
        color: #FFF;
        font-size: $fontSize_90;
        font-weight: 600;
      }

      .t2 {
        color: #E11B00;
        font-size: $fontSize_24;
        font-weight: 500;
      }
      .t3{
        color: #FFF;
        font-size: $fontSize_22;
        font-style: normal;
        font-weight: 400;
        margin: 1.302083333333333vw 0 0 0;
      }
    }

    &:hover {
      .bg {
        img {
          transform: scale(1);
        }
      }
    }
  }

  .section1 {
    .wrap {
      width: 82.292vw;
      margin: 70/$f+vw auto 150/$f+vw;

      .big {
        margin: 0 0 60/$f+vw;
        .top {
          border-bottom: 1/$f+vw solid rgba(112, 112, 112, 0.3);
          padding: 0 0 30/$f+vw;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .l {
            display: flex;
            align-items: center;

            a, p {
              color: #666;
              font-size: 18/$f+vw;
              font-style: normal;
              font-weight: 400;
            }

            p {
              margin: 0 7/$f+vw;
            }
          }

          .label {
            display: flex;
            align-items: center;

            a {
              width: 193/$f+vw;
              height: 50/$f+vw;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #666;
              font-size: 24/$f+vw;
              font-style: normal;
              font-weight: 500;
              transition: .6s;
              &:not(:last-child) {
                margin: 0 10/$f+vw 0 0;
              }
              &.on,&:hover{
                background: #F90D1B;
                color: #fff;
              }
            }
          }
        }
        .bottom{
          margin: 70/$f+vw 0 0 0;
          padding: 0 0 70/$f+vw;
          border-bottom: 1/$f+vw solid rgba(112, 112, 112,0.3);
          display: flex;
          justify-content: space-between;
          .left{
            width: 486/$f+vw;
            .title{
              margin: 0 0 40/$f+vw;
              p{
                line-height: 30/$f+vw; /* 100% */
                color: #000;
                font-size: 30/$f+vw;
                font-style: normal;
                font-weight: 400;
                &:not(:last-child) {
                  margin: 0 0 8/$f+vw;
                }
              }
            }
            .pick{
              color: #666;
              font-size: 1.1vw;
              font-style: normal;
              font-weight: 300;
              line-height: 1.6; /* 172.727% */
              margin: 0 0 20/$f+vw;
            }
            .time{
              color: #666;
              font-family: DINPro;
              font-size: 22/$f+vw;
              font-style: normal;
              font-weight: 400;
              line-height: 34/$f+vw; /* 154.545% */
              margin: 0 0 87/$f+vw;
            }
            .more{
              width: fit-content;
              display: flex;
              align-items: center;
              p{
                color: #F90D1B;
                font-size: 24/$f+vw;
                font-style: normal;
                font-weight: 500;
                line-height: 24/$f+vw; /* 100% */
                margin: 0 22/$f+vw 0 0;
              }
              img{
                width: 16/$f+vw;
                position: relative;
                top: 2/$f+vw;
                transition: all 600ms;
              }
              &:hover{
                img{
                  transform: translateX(20px);
                }
              }
            }
          }
          .img{
            width: 994/$f+vw;
            height: 455/$f+vw;
            overflow: hidden;
            img{
              width: 100%;
              transition: all 600ms;
            }
            &:hover{
              img{
                transform: scale(1.05);
              }
            }
          }
        }
      }

      .small{
        .item{
          display: flex;
          &:not(:last-child) {
            margin: 0 0 60/$f+vw;
          }
          .data{
            width: 120/$f+vw;
            height: 120/$f+vw;
            border: 1/$f+vw solid #F90D1B;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 42/$f+vw 0 0;
            transition: .6s;
            span{
              color: #F90D1B;
              font-family: DINBLACK;
              font-size: 26.62/$f+vw;
              font-style: normal;
              font-weight: 900;
              line-height: 41.14/$f+vw; /* 154.545% */
              margin: 0 0 4/$f+vw;
              display: block;
              transition: .6s;
            }
            .line{
              width: 28/$f+vw;
              height: 4/$f+vw;
              background: #F90D1B;
              margin: 0 0 2/$f+vw;
              transition: .6s;
            }
            p{
              color: #F90D1B;
              font-family: DINPro;
              font-size: 20/$f+vw;
              font-style: normal;
              font-weight: 500;
              line-height: 41.14/$f+vw; /* 205.7% */
              transition: .6s;
            }
          }
          .text{
            width: 1417/$f+vw;
            padding: 0 59/$f+vw 60/$f+vw 0;
            border-bottom: 1px solid rgba(112, 112, 112,0.3);
            h1{
              color: #000;
              font-size: 30/$f+vw;
              font-style: normal;
              font-weight: 400;
              line-height: 30/$f+vw; /* 100% */
              margin: 0 0 24/$f+vw;
            }
            p{
              color: #666;
              font-size: 1.1vw;
              font-style: normal;
              font-weight: 300;
              line-height: 1.6; /* 172.727% */
            }
          }
          &:hover{
            .text{
              h1{
                font-weight: bold;
              }
            }
            .data{
              background: #F90D1B;
              .line{
                background: #fff;
              }
              span,p{
                color: #fff;
              }
            }
          }
        }
      }

      .paging{
        margin: 60/$f+vw 0 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        a{
          width: 38/$f+vw;
          height: 38/$f+vw;
          border: 1/$f+vw solid #666;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #666;
          font-family: DINPro;
          font-size: 20/$f+vw;
          font-style: normal;
          font-weight: 500;
          line-height: 20/$f+vw; /* 100% */
          margin: 0 4/$f+vw;
          &.none{
            border: 1/$f+vw solid #D9D9D9;
          }
          &.on{
            border: 1/$f+vw solid #F90D1B;
            color: #F90D1B;
          }
        }
      }
    }
  }

  .page{
    .wrap{
      width: 82.292vw;
      margin: 67/$f+vw auto 150/$f+vw;
      .headline{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0 4/$f+vw;
        margin: 0 0 96/$f+vw;
        border-bottom: 1/$f+vw solid rgba(112, 112, 112,0.3);
        .l {
          display: flex;
          align-items: center;

          a, p {
            color: #666;
            font-size: 18/$f+vw;
            font-style: normal;
            font-weight: 400;
          }

          p {
            margin: 0 7/$f+vw;
          }
        }
        .back{
          width: 193/$f+vw;
          height: 50/$f+vw;
          background: #F90D1B;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #FFF;
          font-size: 24/$f+vw;
          font-style: normal;
          font-weight: 600;
        }
      }
      .content{
        h1{
          color: #000;
          font-size: 40/$f+vw;
          font-style: normal;
          font-weight: 600;
          line-height: 60/$f+vw; /* 150% */
          margin: 0 0 30/$f+vw;
        }
        .time{
          color: #666;
          font-family: DINPro;
          font-size: 22/$f+vw;
          font-style: normal;
          font-weight: 400;
          line-height: 34/$f+vw; /* 154.545% */
          margin: 0 0 53/$f+vw;
        }
        .text{

          p{
            color: #000;
            text-align: justify;
            font-size: 1.1vw;
            font-style: normal;
            font-weight: 400;
            line-height: 1.6; /* 172.727% */
          }
        }

        .other{
          margin: 100/$f+vw 0 0 0;
          h5{
            color: var(--a-0-a-0-a-9, #A0A0A9);
            text-align: justify;
            font-size: 22/$f+vw;
            font-style: normal;
            font-weight: 400;
            line-height: 22/$f+vw; /* 100% */
          }
          .flex{
            margin: 30/$f+vw 0 0 0;
            display: flex;
            align-items: center;
            p{
              color: var(--a-0-a-0-a-9, #A0A0A9);
              text-align: justify;
              font-size: 22/$f+vw;
              font-style: normal;
              font-weight: 400;
              line-height: 22/$f+vw; /* 100% */
              margin: 0 20/$f+vw 0 0;
            }
            .display{
              display: flex;
              align-items: center;
              .list{
                width: 50/$f+vw;
                height: 50/$f+vw;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                &:not(:last-child) {
                  margin: 0 20/$f+vw 0 0;
                }
              }
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .banner{
      padding-top: 0;
      .bg{
        img{
          min-height: 200px;
        }
      }
      .text{
        .t{
          font-size: 24px;
        }
        .t2{
          font-size: 18px;
        }
      }
    }

    .section1{
      .wrap{
        width: 90%;
        margin: 30px auto 78px;
        .big {
          margin: 0 0 30px;
          .top{
            flex-direction: column;
            align-items: unset;
            padding: 0 0 15px;
            .l{
              margin: 0 0 15px;
              p,a{
                font-size: 16px;
              }
            }
            .label{
              a{
                width: 120px;
                height: 31px;
                font-size: 16px;
              }
            }
          }
          .bottom{
            flex-direction: column-reverse;
            .left{
              width: 100%;
              .title{
                margin: 0 0 15px;
                p{
                  font-size: 20px;
                  line-height: 1;
                  &:not(:last-child){
                    margin: 0 0 5px;
                  }
                }
              }
              .pick{
                font-size: 16px;
                line-height: 1.6;
                margin: 0 0 20px;
              }
              .time{
                font-size: 14px;
                line-height: 1;
                margin: 0 0 15px;
              }
              .more{
                p{
                  font-size: 14px;
                  margin: 0 7px 0 0;
                  line-height: 1;
                }
                img{
                  width: 10px;
                }
              }
            }
            .img{
              width: 100%;
              height: auto;
              margin: 0 0 25px;
            }
          }
        }
        .small{
          .item{
            flex-direction: column;
            &:not(:last-child) {
              margin: 0 0 25px;
            }
            .data{
              width: 60px;
              height: 60px;
              span{
                font-size: 14px;
                line-height: 1;
              }
              .line{
                width: 14px;
                height: 2px;
                margin: 5px 0;
              }
              p{
                font-size: 10px;
                line-height: 1;
              }
            }
            .text{
              width: 100%;
              margin: 25px 0 0 0;
              h1{
                font-size: 18px;
                line-height: 1.4;
                margin: 0 0 15px;
              }
              p{
                font-size: 14px;
                line-height: 1.6;
              }
            }
          }
        }
        .paging{
          margin: 35px 0 0 0;
          a{
            width: 40px;
            height: 40px;
            font-size: 13px;
            margin: 0 5px;
          }
        }
      }

    }

    .page{
      .wrap{
        width: 90%;
        margin: 30px auto 78px;
        .headline{
          flex-direction: column;
          align-items: unset;
          padding: 0 0 15px;
          margin: 0 0 25px;
          .l{
            a,p{
              font-size: 16px;
            }
          }
          .back{
            width: 120px;
            height: 31px;
            font-size: 16px;
            margin: 10px 0 0 0;
          }

        }
        .content{
          h1{
            font-size: 18px;
            line-height: 1.4;
            margin: 0 0 15px;
          }
          .time{
            font-size: 16px;
            line-height: 1.6;
          }
          .text{
            p{
              font-size: 16px;
              line-height: 1.6;
            }
          }
          .other{
            margin: 25px 0 0 0;
            h5{
              font-size: 16px;
              line-height: 1;
              margin: 15px 0;
            }
            .flex{
              flex-direction: column;
              align-items: unset;
              p{
                font-size: 16px;
                line-height: 1;
                margin: 0 0 10px;
              }
              .display{
                .list{
                  width: 45px;
                  height: 45px;
                  &:not(:last-child) {
                    margin: 0 7px 0 0;
                  }
                }
              }
            }
          }
        }
      }
    }

  }
}